<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA | Main view</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Ladda style -->
    <link href="css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

<div id="wrapper">

    <!--引入公共页面-->
    <div th:replace="common/sidebar::sidebar(activeUri='supervisor-init')"></div>
    <!--当前用户的账户信息-->
    <input type="hidden" id="current_user" th:value="${session.userAccount}">

    <div id="page-wrapper" class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>已设置考场号</h5>
                            <button class="ladda-button ladda-button-demo btn btn-primary" data-style="expand-right" id="btn_setExamRoomId" onclick="btn_setExamRoomId()">设置考场号</button>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="alert alert-success">
                                已设置当前的考场号为：【<a class="alert-link" href="#" id="label_examRoomId" style="color: red"></a>】，不允许后续更改。字母代表面试考生组号， 数字代表当前的考场号。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>当前考场考生抽签信息</h5>
                            <button class="ladda-button btn btn-primary" data-style="expand-right" id="btn_downLoadExameeSummary">下载</button>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="alert alert alert-info">
                                当前考场面试总计人数为：【<a class="alert-link" href="#" id="totalExameeAmount" style="color: red"></a>】人
                            </div>
                            <div class="alert alert alert-info">
                                当前考场缺考考生序号为：【<a class="alert-link" href="#" id="absentSequence" style="color: red"></a>】
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>本考场考官信息</h5>
                            <button class="ladda-button btn btn-primary" data-style="expand-right" id="btn_ExaminerDrawLotsDetails">下载</button>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover dataTables-example" id="table_examinerDetails">
                                    <thead>
                                    <tr>
                                        <th>座位号</th>
                                        <th>考官角色</th>
                                        <th>身份证号（部分位数）</th>
                                        <th>姓名</th>
                                        <th>密码</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="pull-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company &copy; 2014-2018
            </div>
        </div>

    </div>
</div>
<div class="modal inmodal fade" id="modal_setExamRoomId" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">设置考场号</h4>
            </div>
            <div class="modal-body">
                <div class="ibox-content">
                    <form id="form_ExamRoomId">
                        <div class="form-group row"><label class="col-lg-3 col-form-label">本考场ID</label>
                            <div class="col-lg-9">
                                <input type="text" name="text_examRoomId" id="text_examRoomId" placeholder="如：A1,B2,C3等">
                                <span class="form-text m-b-none">考场ID格式为：本考场面试考生组号+考场号码</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer">
                <button class="ladda-button btn btn-primary" data-style="expand-right" id="btn_examRoomIdSetConfirm">下载</button>
            </div>
        </div>
    </div>
</div>

<!-- Mainly scripts -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<script type="text/javascript" th:src="@{js/plugins/dataTables/datatables.min.js}"></script>
<script type="text/javascript" th:src="@{js/plugins/dataTables/dataTables.bootstrap4.min.js}"></script>

<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Ladda -->
<script src="js/plugins/ladda/spin.min.js"></script>
<script src="js/plugins/ladda/ladda.min.js"></script>
<script src="js/plugins/ladda/ladda.jquery.min.js"></script>
<script>
    $(document).ready(function() {
        init();
        getExameeDrawLotsSummary();
        getExaminerDrawLotsDetails()
    });
    function init() {
        //获取考场号
        $.ajax({
            url:"/supervisor/getExamRoomId",
            type:"POST",
            success: function (result) {
                var data=result.data;
                if (data==""){
                    $("#label_examRoomId").text("考场号尚未配置，请点击设置按钮配置考场号");
                }else {
                    $("#label_examRoomId").text(data);
                }
            }
        })
    }

    function btn_setExamRoomId() {
        //弹出模态框
        $("#modal_setExamRoomId").modal({
            backdrop:"static"
        });
    }
    //考场Id确认按钮
    $("#btn_examRoomIdSetConfirm").ladda().click(function() {
        var l = Ladda.create(this);
        l.start();
        var inputExamRoomId=$("#text_examRoomId").val();
        if (validate(inputExamRoomId)){
            $.ajax({
                url:"/supervisor/setExamRoomId",
                data:"examRoomId="+inputExamRoomId,
                type:"POST",
                success:function (result) {
                    if (result.code=="20000"){
                        l.stop();
                        alert(result.message);
                        $('#modal_setExamRoomId').modal('hide');
                        window.location.reload();
                    }else {
                        alert(result.message)
                    }

                }
            });
        }

    });

    //校验考场号
    function validate(inputExamRoomId) {
        if (inputExamRoomId==null||inputExamRoomId==""){
            alert("考场ID不允许为空");
            return false;
        }else {
            var regular="^[A-Z][0-9]$";
            var pattern = new RegExp(regular);

            if (!pattern.test(inputExamRoomId)){
                alert("请输入指定格式");
                return false;
            }else {
                return true;
            }
            return  false;
        }

    }

    //获取考生抽签信息
    function getExameeDrawLotsSummary() {
        $.ajax({
            url:"/supervisor/getExameeDrawLotsSummary",
            type:"POST",
            success:function (result) {

                   $("#totalExameeAmount").text(result.data.totalExameeAmount);
                   $("#absentSequence").text(result.data.absentSequence);

            }
        });
    }
    //获取考官抽签信息
    function getExaminerDrawLotsDetails() {
        var examinerDetails= $("#table_examinerDetails").DataTable({
            responsive: true,
            bFilter: false,
            bLengthChange: false,
            ajax:{
                url:"/supervisor/getExaminerDrawLotsInfo",
                type:"POST",
                dataSrc:function (result) {
                    return result.data;
                }
            },
            bAutoWidth: true,
            columns: [
                { data: 'seatNumber' },
                {"data":null,"render":function (data,type,row,meta) {
                        var signState=row.signState;
                        if (signState=="0"){ return "普通考官";}
                        else if (signState=="1"){ return "主考官";}
                        else return null;
                    }},
                { data: 'idNumber' },
                { data: 'name' },
                { data: 'passWord' }
            ]
        });
    }

    //下载考生抽签信息
    $("#btn_downLoadExameeSummary").ladda().click(function() {
        var l = Ladda.create(this);
        l.start();
        $.ajax({
            url:"/downLoad/downLoadExameeDrawLotsSummary",
            type:"POST",
            success: function (result) {
                if (result.code=="20000"){
                    l.stop();
                    alert("下载成功");
                    window.location.reload();
                }else {alert("下载失败");l.stop();}
            }
        });
    });
    //下载考官抽签信息
    $("#btn_ExaminerDrawLotsDetails").ladda().click(function () {
        var l = Ladda.create(this);
        l.start();
        $.ajax({
            url:"/downLoad/downLoadExaminerDrawLotsInfo",
            type:"POST",
            success: function (result) {
                if (result.code=="20000"){
                    l.stop();
                    alert("下载成功");
                    window.location.reload();
                }else {alert("下载失败");}
            }
        });
    });

</script>

</body>

</html>
